<template>
  <div>
    <Top :title="detail.abbreviation" iconShow="1"></Top>
    <div class="platform">
      <div class="platform-top">
        <div class="platform-top-head">
          <div class="platform-top-head-logo">
            <div class="platform-top-head-logo-img">
              <img :src="detail.logo" />
            </div>
          </div>
          <div class="platform-top-head-advantige">
            <div>{{detail.abbreviation}}</div>
            <span v-for="(item,index) in detail.label" :key="index">
              <span>{{item}}</span>&nbsp;
            </span>
            <div style="color:red"><span style="font-size:0.6rem;">¥</span>&nbsp;<span style="font-size:0.75rem;">{{detail.quato}}</span></div>
          </div>
        </div>
        <div class="platform-top-detail">
          <ul>
            <li>
              <span class="top">{{detail.dailyInterestRate}}%</span>
              <br/>
              <span class="bot">日利率</span>
            </li>
            <li>
              <span class="top">{{detail.maxCycle}}</span>
              <br/>
              <span class="bot">期限</span>
            </li>
            <li>
              <span class="top">{{detail.lendSpeed}}</span>
              <br/>
              <span class="bot">最快放款</span>
            </li>
          </ul>
        </div>
  
      </div>
      <div class="platform-content">
        <div class="platform-content-condition">
          <p>申请条件</p>
          <div v-for="(item,index) in detail.applyCondition" :key="index" style="line-height:0.6rem;font-size:0.36rem;color:#999999;word-wrap:break-word;">{{item}}</div>
  
        </div>
        <div class="platform-content-material">
          <p>所需材料</p>
          <div v-for="(item,index) in detail.requireDocument" :key="index" style="line-height:0.6rem;font-size:0.36rem;color:#999999;word-wrap:break-word;">{{item}}</div>
        </div>
        <div class="platform-content-flow">
          <p>产品简介</p>
          <div style="line-height:0.6rem;font-size:0.36rem;color:#999999;word-wrap:break-word;">{{detail.introduction}}</div>
        </div>
      </div>
      <mt-button type="primary" @click="getMoney">提钱花</mt-button>
    </div>
  </div>
</template>
<script>
import Top from '../components/Header'
import { Indicator } from 'mint-ui'
import { MessageBox } from 'mint-ui'
export default {
  name: 'login',
  data() {
    return {
      detail: {},
      link:''
    }
  },
  methods: {
    getMoney() {
      // 记录访问次数
      // 访问类型(1首页浏览量,2首页bannar点击量,3注册登录点击量,4首页产品点击量,5推荐产品点击量,6详情分享点击量,7提前花点击量)
      let borrowerId = window.sessionStorage.getItem('borrowerId');
      let platformId = this.$route.query.platformId;
      let type = 7;
      let invData = {
        borrowerId: borrowerId,
        platformId: platformId,
        type: type
      }
      Indicator.open('加载中...')
      this.$http.post('/loansupermarket-app/personal/saveCustomerPlatformVisitInfo.do', invData)
        .then((response) => {
          var resBody = response.body;
          // console.log(resBody)
          if (resBody.code == '000') {
            let postData = { borrowerId: borrowerId };
            // 判断登录没登录
            // 如果borrowerId不存在，那么未登录
            if (!postData.borrowerId) {
              this.$router.push({ path: '/login',query:{platformId:platformId,history:'1'}});
              // 取消loading
              setTimeout(function () {
                Indicator.close();
              }, 500)
            } else {
              // 如果borrowerId存在，那么用borrowerId去判断登录状态是否过期
              this.$http.post('/loansupermarket-app/personal/getCustomerBaseInfo.do', postData)
                .then((response) => {
                  setTimeout(function () {
                    Indicator.close();
                  }, 500)
                  var data = response.body;
                  // console.log(data)
                  if (data.code == '444') {
                    // 没登录，那么进去登录页面
                    MessageBox.alert('还未登录，请先登录~').then(action => {
                      this.$router.push({ path: '/login',query:{platformId:platformId,history:'1'}});
                    });
                  } else if (data.code == '000') {
                    // 已登录，跳转到第三方平台页面
                    window.location.href = this.link;
                    // console.log(data.result)
                  } else {
                    MessageBox.alert(data.msg, '提示')
                  }
                });
            }
          }
        });


    }
  },
  mounted() {
    //调用产品详情接口
    let that = this;
    let platformId = this.$route.query.platformId;
    Indicator.open('加载中...')
    this.$http.post('/loansupermarket-app/platform/getPlatformDetail.do?platformId=' + platformId)
      .then((response) => {
        setTimeout(function () {
          Indicator.close();
        }, 500)
        var resBody = response.body;
        // console.log(resBody);
        if (resBody.code == '000') {
          that.detail = resBody.result;
          that.detail.label = that.detail.label.split(",");
          that.detail.applyCondition = that.detail.applyCondition.split('\n');
          that.detail.requireDocument = that.detail.requireDocument.split('\n');
          this.link = resBody.result.link;
        }
      }).catch(function (response) {
        alert(response.msg)
      });
  },
  components: { Top }
}
</script>
<style lang="scss">
@import '../scss/variable/base.scss';
.platform {
  margin-top: 1.48rem;
  box-sizing: border-box;
  padding: 0 0.4rem;
  &-top {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
    border-radius: 0.16rem;
    overflow: hidden;
    width: 100%;
    background: #fff;
    &-head {
      padding: 0.2rem 0 0.1rem 0;
      width: 100%;
      min-height: 2.9rem;
      height: 2.9rem;
      overflow: hidden;
      border-bottom: 1px solid #e4e4e4;
      &-logo {
        float: left;
        width: 2.2rem;
        height: 100%;
        box-sizing: border-box;
        padding: 0.8rem 0.4rem;
        &-img {
          width: 1.4rem;
          height: 1.4rem;
          border-radius: 50%;
          margin: 0 auto;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      &-advantige {
        text-align: left;
        width: 6.85rem;
        float: left;
        height: 100%;

        div {
          height: 1.2rem;
          line-height: 1.4rem;
          font-size: 0.45rem;
        }
        span {
          line-height: 0.6rem;
          span {
            &:nth-of-type(1) {
              margin-left: 0;
            }
            display: line-block;
            height: 0.46rem;
            border-radius: 0.28rem;
            padding: 0.05rem 0.2rem;
            border:1px solid $primaryColor;
            font-size: 0.24rem;
            color:$primaryColor;
            margin-left: 0.2rem;
          }
        }
      }
    }
    &-detail {
      background: #fff;
      overflow: hidden;
      padding: 0.2rem 0 0 0;
      height: 1.6rem;
      ul {
        li {
          position: relative;
          .top {
            font-size: 0.4rem;
            width: 100%;
            left: 0%;
            position: absolute;
            top: -0.4rem;
            font-family: "微软雅黑";
            line-height: 0.75rem;
          }
          .bot {
            color: #999999;
            font-size: 0.33rem;
            font-family: "微软雅黑";
          }
          float: left;
          width: 33%;
          margin-top: 0.4rem;
          border-right: 1px solid $borderColor;
          height: 0.6rem;
          &:nth-last-of-type(1) {
            border: none;
          }
        }
      }
    }
  }
  &-content {
    border-radius: 0.16rem;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
    padding: 0 0 0.2rem 0;
    text-align: left;
    width: 100%;
    background: #fff;
    margin-top: 0.28rem;
    &-condition,
    &-material,
    &-flow {
      // padding-top: 0.2rem;
      box-sizing: border-box;
      padding: 0.2rem 0.4rem 0.4rem 0.4rem;
      border-bottom: 1px solid $borderColor;
      p {
        font-size: 0.38rem;
        &:nth-of-type(1) {
          border-left: 2px solid #30ccdb;
          height: 0.3rem;
          line-height: 0.36rem;
          padding-left: 0.3rem;
        }
      }
    }
    &-flow {
      border: none;
    }
  }
  .mint-button {
    width: 100%;
    height: 1.2rem;
    margin-top: 0.9rem;
    font-size: 0.42rem;
    margin-bottom: 0.3rem;
  }
}
</style>

